<template>
  <div class="outer">
    <div class="white_wrap">
      <div class="loginlabel">
        绑定手机号
        <div class="tcenter" style="margin-top:20px;">
          <img src="../assets/img/loginlogo@2x.png" alt class="logo" />
        </div>
      </div>
      <div class="loginarea">
        <div class="login_phone">
          <img src="../assets/img/login_uicon@2x.png" alt />
          <div class="login_phoput">
            <input type="number" placeholder="输入手机号码" v-model="phone" />
          </div>
        </div>
        <div class="login_phone">
          <img src="../assets/img/login_vericon@2x.png" alt />
          <div class="login_phoput">
            <input type="text" placeholder="输入验证码" v-model="vericode" />
            <button @click="getcode">{{btntext}}</button>
          </div>
        </div>
        <div class="xiyi">
          <div>
            <input type="checkbox" v-model="agree" />
          </div>
          <p>
            我已阅读并同意<router-link :to="{ path: '/uagree' }" class="useragree">《用户隐私保护协议》</router-link>
          </p>
        </div>
        <div :class="{'login_btn':true,'on': (agree && vericode && phone)}" @click="bind">确认绑定</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      vericode: "",
      getting: false,
      btntext: "发送验证码",
      agree: false,
      tokens:{},
      unionid: '',
      locate: ''
    };
  },
  created(){
      this.unionid = this.$route.query.unionid;
      this.getLocate();
  },
  methods: {
    navito(url) {
      this.$router.push({ path: url });
    },
    getcode() {
      let that = this,
        timer;
      let REGPhone = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
      if (!REGPhone.test(this.phone)) {
        this.mui.toast("手机号有误");
        return;
      }
      if (this.getting) {
        return;
      }
      this.getting = true;
      this.Http.post("/yzj/phone/verify-code-ali", {
        phone: this.phone
      }).then(
        res => {
          that.btntext = "120s";
          let second = 120;
          timer = setInterval(function() {
            second--;
            if (second <= 0) {
              that.getting = false;
              that.btntext = "获取验证码";
              clearInterval(timer);
            } else {
              that.btntext = `${second}s`;
            }
          }, 1000);
        },
        err => {
          that.mui.toast(err);
          that.getting = false;
        }
      );
    },
    bind() {
      let that = this;
      if (!this.phone || !this.vericode || !this.agree) {
        return;
      }
      let REGPhone = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
      if (!REGPhone.test(this.phone)) {
        this.mui.toast("手机号有误");
        return;
      }
      this.Http.post("/yzj/login/wechat/bind", {
        phone: this.phone,
        phonecode : this.vericode,
        unionid: this.unionid,
        cityName: this.locate || ''
      }).then(res => {
        this.tokens = res;
        localStorage.setItem("Authorization", `Bearer ${res.token}`);
        that.loadUser();
        that.$router.replace("/index");
      });
    },
    loadUser() {
      this.Http.get("/yzj/current-customer", null).then(res => {
        this.tokens.uid = res.id;
        this.app.isInAPP && this.app.setinfo(this.tokens);
        localStorage.setItem("uid", res.id);
        this.bindRelation(res.id);
        localStorage.setItem("phone", res.phone);
        this.$store.commit('SETUSER', res);
        localStorage.setItem("user",JSON.stringify(res));
      });
    },
    getLocate(){
      let locate = this.$store.state.locate,that=this;
      if(locate){
        this.locate = locate;
      }else{
        if(this.app.isInAPP){
          this.app.getlocate().then((res)=>{
            let locate = JSON.parse(res);
            that.locate = locate.city;
            that.$store.state.locate = locate.city;
          })
        }
      }
    }
  },
  components: {}
};
</script>

<style lang='scss' scoped>
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
.logo {
  width: px2em(310);
}
.white_wrap {
  position: absolute;
  padding: 0 px2em(30);
  width: 100%;
  box-sizing: border-box;
  left: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  background-image: url(../assets/img/loginbg.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: px2em(300) auto;
}
.flex_center_colum {
  height: 100%;
  padding: px2em(30);
}
.loginlabel {
  margin-top: px2em(120);
  font-size: 1.2em;
}
.loginarea {
  margin: px2em(70);
}
.login_phone {
  border-bottom: 1px solid #ccc;
  margin-bottom: px2em(35);
  line-height: px2em(60);
  > img {
    float: left;
    width: px2em(30);
    margin-top: 10px;
  }
  .login_phoput {
    margin-left: px2em(70);
    display: flex;
    > input {
      flex: 1;
      margin: 0;
      border: 0;
      background: transparent;
      padding: 0;
    }
    button {
      height: px2em(50);
      line-height: px2em(50);
      border-radius: px2em(25);
      font-size: 12px;
      padding: 0 6px;
      margin-top: 5px;
    }
  }
}
.xiyi {
  display: flex;
  input[type="checkbox"] {
    background: #fff;
    margin-right: 1em;
  }
  > p {
    font-size: 12px;
  }
}
.login_btn {
  margin-top: 15px;
  height: px2em(80);
  border-radius: px2em(40);
  line-height: px2em(80);
  color: #fff;
  background: #ccc;
  text-align: center;
  &.on {
    background: #5681f3;
  }
}
.log_pass {
  color: #333;
  margin-top: px2em(30);
  display: inline-block;
}
.loginwarn {
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  display: flex;
  color: #999;
  font-size: 10px;
}
.loginlabel {
  > a {
    color: #999;
    display: block;
    margin-bottom: px2em(80);
  }
}
.welogin_line {
  border-top: 1px solid #ccc;
  text-align: center;
  > span {
    display: inline-block;
    padding: 0 1em;
    background: #fff;
    position: relative;
    top: -0.6em;
    color: #333;
  }
}
.mui-icon-weixin {
  color: #3cb035;
  font-size: 36px;
}
</style>
